<turbo-frame id="main-product-<%= product.id %>" target="_top">
  <% current_variant = @selected_variant || @variant_from_options || product.first_or_default_variant(current_currency) %>
  <div class="main-product-container" style="<%= section_styles(section) %>">
    <div
      class="page-container lg:mb-16"
      <%= 'data-controller=product-form' %>
      data-product-form-required-options-value='<%= product.option_type_ids.map(&:to_s).to_json %>'
      data-product-form-selected-variant-disabled-value='<%= !@selected_variant&.in_stock? %>'
      data-product-form-variant-from-options-disabled-value='<%= !@variant_from_options&.in_stock? %>'
      data-product-form-frame-name-value="main-product-<%= product.id %>"
      data-product-form-url-value="<%= spree.product_url(product) %>">
      <template data-product-form-target="spinnerTemplate">
        <%= render "spree/shared/icons/spinner" %>
      </template>

      <div id="product-details-page" class="grid grid-cols-1 lg:grid-cols-12 gap-x-14">
        <% images = product_media_gallery_images(product, selected_variant: @selected_variant, variant_from_options: @variant_from_options) %>

        <div class="lg:col-span-7 relative">
          <div class="lg:hidden mb-6">
            <%= render 'spree/products/media_gallery', images: images, product: product %>
          </div>
          <div class="hidden lg:block" data-product-form-target="desktopMediaGallery">
            <%= render 'spree/products/media_gallery', images: images, desktop: true, product: product %>
          </div>
        </div>

        <div class="lg:col-span-5 lg:col-start-8">
          <% show_waitlist_modal = spree.respond_to?(:waitlists_path) && current_variant.present? %>
          <div
            <% if show_waitlist_modal %>
            data-controller="modal"
            <% end %>
            data-modal-allow-background-close="true"
            class="h-full w-full waitlist-modal"
            data-modal-backdrop-color-value="rgba(0,0,0,0.32)">
            <%= form_with(url: spree.line_items_path, method: :post, data: { controller: "turbo-stream-form", product_form_target: "form" }) do |f| %>
              <%= hidden_field_tag :variant_id, current_variant&.id %>

              <div data-product-form-target="productDetails">
                <% section.blocks.each do |block| %>
                  <div <%= block_attributes(block) %>>
                    <% case block.class.name %>
                    <% when 'Spree::PageBlocks::Products::Title' %>
                      <h1 class="text-2xl uppercase tracking-tight font-medium">
                        <%= product.name %>
                      </h1>
                    <% when 'Spree::PageBlocks::Products::Brand' %>
                      <% if product.brand_taxon %>
                        <%= link_to spree.nested_taxons_path(product.brand_taxon), title: product.brand_name do %>
                          <h3 class="text-sm lg:mt-0 inline-block mb-1">
                            <%= product.brand_name %>
                          </h3>
                        <% end %>
                      <% end %>
                    <% when 'Spree::PageBlocks::Products::Price' %>
                      <%= render 'spree/products/price', product: product, use_variant: true, selected_variant: @selected_variant, price_class: "lg:text-lg lg:font-medium", price_container_class: "w-full" %>
                    <% when 'Spree::PageBlocks::Products::VariantPicker' %>
                      <%= render 'spree/products/variant_picker', product: product, selected_variant: @selected_variant %>
                    <% when 'Spree::PageBlocks::Products::QuantitySelector' %>
                      <%= render 'spree/products/quantity_selector', product: product, selected_variant: @selected_variant %>
                    <% when 'Spree::PageBlocks::Products::BuyButtons' %>
                      <div class="flex w-full" data-controller='sticky-button'>
                        <%= render 'spree/products/add_to_cart_button', product: product, selected_variant: @selected_variant, sticky_button_classes: "w-full" %>
                        <%= render 'spree/products/add_to_wishlist', variant: current_variant, css_classes: 'btn-secondary ml-5 h-12 !py-0 !px-3 border-default', icon_size: 24 %>
                      </div>
                    <% when 'Spree::PageBlocks::Products::Description' %>
                      <%= render 'spree/products/description', product: product, block: block, section: section %>
                    <% when 'Spree::PageBlocks::Metafields' %>
                      <%= render 'spree/products/metafields', product: product, block: block, section: section %>
                    <% end %>
                  </div>
              <% end %>
            <% end %>

            <%= render 'spree/products/add_to_waitlist', variant: current_variant if show_waitlist_modal %>
          </div>
        </div>
      </div>
    </div>
  </div>
  <%= render 'spree/products/json_ld', product: product, selected_variant: @selected_variant %>
</turbo-frame>
